<template>
  <div class="base">
    <!--填资进度条-->
    <nav-bar :position="'identity'" :status="status"/>
    <div v-show="false">
      <doFaceButton ref="checkFaceInfo" />
    </div>
    <div ref="form1" class="form">
      <div class="form-group">
        <label>{{ $t('idType') }}</label><!--证件类型-->
        <input @click="showIDTypePicker" v-model="form.identificationType" :disabled="readonly" type="text"
          :placeholder="$t('plsChoose')" readonly class="input-select val" />
      </div>

      <div v-if="form.identificationType" class="form-group" style="display: block;height: auto;">
        <label>{{ nameLabel }} </label><!--证件号码-->
        <input @focus='IdFocus' @blur="IdBlur" @input="change" class="val"
          v-if="!['Postal ID', 'Voter\'s ID'].includes(form.identificationType) && false" ref="cardId"
          v-model="form.cardId" :disabled="readonly" type="text" :placeholder="$t('plsInput')" maxlength="50" />

        <div class="val separate-input UMID" v-if="currentIdentificationId === 14">
          <span class="unit">CRN-</span>
          <input v-model="form.cardId_UMID_1" @blur="idCardBlur(1)" ref="cardId_UMID_1" :disabled="readonly" type="text"
            maxlength="4" @input="changeCardID(14, 4, 1)" />
          <span class="line">-</span>
          <input v-model="form.cardId_UMID_2" @blur="idCardBlur(2)" ref="cardId_UMID_2" :disabled="readonly" type="text"
            maxlength="7" @input="changeCardID(14, 7, 2)" />
          <span class="line">-</span>
          <input v-model="form.cardId_UMID_3" @blur="idCardBlur(3)" ref="cardId_UMID_3" :disabled="readonly" type="text"
            maxlength="1" @input="changeCardID(14, 1, 3, false)" />
        </div>

        <input v-if="currentIdentificationId === 7" class="val" v-model="form.cardId_Passport" @blur="idCardBlur(1)"
          ref="cardId_Passport" :disabled="readonly" type="text" maxlength="9" :placeholder="$t('plsInput')" />

        <div class="val separate-input TINID" v-if="currentIdentificationId === 13">
          <input v-model="form.cardId_TINID_1" @blur="idCardBlur(1)" ref="cardId_TINID_1" :disabled="readonly"
            type="text" maxlength="3" @input="changeCardID(13, 3, 1)" />
          <span class="line">-</span>
          <input v-model="form.cardId_TINID_2" @blur="idCardBlur(2)" ref="cardId_TINID_2" :disabled="readonly"
            type="text" maxlength="3" @input="changeCardID(13, 3, 2)" />
          <span class="line">-</span>
          <input v-model="form.cardId_TINID_3" @blur="idCardBlur(3)" ref="cardId_TINID_3" :disabled="readonly"
            type="text" maxlength="3" @input="changeCardID(13, 3, 3)" />
          <span class="line">-</span>
          <input v-model="form.cardId_TINID_4" @blur="idCardBlur(4)" ref="cardId_TINID_4" :disabled="readonly"
            type="text" maxlength="5" @input="changeCardID(13, 5, 4, false)" />
        </div>

        <div class="val separate-input Driver" v-if="currentIdentificationId === 2">
          <input v-model="form.cardId_Driver_1" @blur="idCardBlur(1)" ref="cardId_Driver_1" :disabled="readonly"
            type="text" maxlength="3" @input="changeCardID(2, 3, 1)" />
          <span class="line">-</span>
          <input v-model="form.cardId_Driver_2" @blur="idCardBlur(2)" ref="cardId_Driver_2" :disabled="readonly"
            type="text" maxlength="2" @input="changeCardID(2, 2, 2)" />
          <span class="line">-</span>
          <input v-model="form.cardId_Driver_3" @blur="idCardBlur(3)" ref="cardId_Driver_3" :disabled="readonly"
            type="text" maxlength="6" @input="changeCardID(2, 6, 3, false)" />
        </div>

        <div class="val separate-input SSSID" v-if="currentIdentificationId === 12">
          <input v-model="form.cardId_SSSID_1" @blur="idCardBlur(1)" ref="cardId_SSSID_1" :disabled="readonly"
            type="text" maxlength="2" @input="changeCardID(12, 2, 1)" />
          <span class="line">-</span>
          <input v-model="form.cardId_SSSID_2" @blur="idCardBlur(2)" ref="cardId_SSSID_2" :disabled="readonly"
            type="text" maxlength="7" @input="changeCardID(12, 7, 2)" />
          <span class="line">-</span>
          <input v-model="form.cardId_SSSID_3" @blur="idCardBlur(3)" ref="cardId_SSSID_3" :disabled="readonly"
            type="text" maxlength="1" @input="changeCardID(12, 1, 3, false)" />
        </div>

        <div class="val separate-input Postal postalID" v-if="currentIdentificationId === 8">
          <span class="unit">PRN-</span>
          <input v-model="form.cardId_Postal_1" @blur="idCardBlur(1)" ref="cardId_Postal_1" :disabled="readonly"
            type="text" maxlength="12" @input="changeCardID(8, 12, 1)" />
          <span class="line">-</span>
          <input v-model="form.cardId_Postal_2" @blur="idCardBlur(2)" ref="cardId_Postal_2" :disabled="readonly"
            type="text" maxlength="1" @input="changeCardID(8, 1, 2, false)" />
        </div>

        <div class="val separate-input Voter voterID" v-if="currentIdentificationId === 15">
          <span class="unit">VIN</span>
          <input v-model="form.cardId_Voter_1" @blur="idCardBlur(1)" ref="cardId_Voter_1" :disabled="readonly"
            type="text" maxlength="4" @input="changeCardID(15, 4, 1)" />
          <span class="line">-</span>
          <input v-model="form.cardId_Voter_2" @blur="idCardBlur(2)" ref="cardId_Voter_2" :disabled="readonly"
            type="text" maxlength="5" @input="changeCardID(15, 5, 2)" />
          <span class="line">-</span>
          <input v-model="form.cardId_Voter_3" @blur="idCardBlur(3)" ref="cardId_Voter_3" :disabled="readonly"
            type="text" maxlength="13" @input="changeCardID(15, 13, 3, false)" />
        </div>

        <input v-if="currentIdentificationId === 9" class="val" v-model="form.cardId_PRC" @blur="idCardBlur(1)"
          ref="cardId_PRC" :disabled="readonly" type="text" maxlength="7" :placeholder="$t('plsInput')" />

        <input v-if="currentIdentificationId === 4" @blur="idCardBlur(1)" class="val" v-model="form.cardId_GSIS"
          ref="cardId_GSIS" :disabled="readonly" type="text" maxlength="11" :placeholder="$t('plsInput')" />

        <div class="val separate-input OWWA" v-if="currentIdentificationId === 6">
          <span class="unit">NCR</span>
          <input v-model="form.cardId_OWWA_1" @blur="idCardBlur(1)" ref="cardId_OWWA_1" :disabled="readonly" type="text"
            maxlength="8" @input="changeCardID(6, 8, 1)" />
          <span class="line">-</span>
          <input v-model="form.cardId_OWWA_2" @blur="idCardBlur(2)" ref="cardId_OWWA_2" :disabled="readonly" type="text"
            maxlength="2" @input="changeCardID(6, 2, 2, false)" />
        </div>

        <div class="val separate-input National" v-if="currentIdentificationId === 16">
          <input v-model="form.cardId_National_1" @blur="idCardBlur(1)" ref="cardId_National_1" :disabled="readonly"
            type="text" maxlength="4" @input="changeCardID(16, 4, 1)" />
          <span class="line">-</span>
          <input v-model="form.cardId_National_2" @blur="idCardBlur(2)" ref="cardId_National_2" :disabled="readonly"
            type="text" maxlength="4" @input="changeCardID(16, 4, 2)" />
          <span class="line">-</span>
          <input v-model="form.cardId_National_3" @blur="idCardBlur(3)" ref="cardId_National_3" :disabled="readonly"
            type="text" maxlength="4" @input="changeCardID(16, 4, 3)" />
          <span class="line">-</span>
          <input v-model="form.cardId_National_4" @blur="idCardBlur(4)" ref="cardId_National_4" :disabled="readonly"
            type="text" maxlength="4" @input="changeCardID(16, 4, 4, false)" />
        </div>

        <div class="val separate-input Philhealth" v-if="currentIdentificationId === 17">
          <input v-model="form.cardId_Philhealth_1" @blur="idCardBlur(1)" ref="cardId_Philhealth_1" :disabled="readonly"
            type="text" maxlength="2" @input="changeCardID(17, 2, 1)" />
          <span class="line">-</span>
          <input v-model="form.cardId_Philhealth_2" @blur="idCardBlur(2)" ref="cardId_Philhealth_2" :disabled="readonly"
            type="text" maxlength="9" @input="changeCardID(17, 9, 2)" />
          <span class="line">-</span>
          <input v-model="form.cardId_Philhealth_3" @blur="idCardBlur(3)" ref="cardId_Philhealth_3" :disabled="readonly"
            type="text" maxlength="1" @input="changeCardID(17, 1, 3, false)" />
        </div>
        <div class="error-tips" ref="error-tips-idCard"> &nbsp;</div>
      </div>

      <div class="form-group">
        <label>{{ $t('birthday') }}</label><!--生日-->
        <div v-if="form.birthDay" @click="toggleBirthdayPicker" class="val input-select"
          :class="{ 'inputboxDisabled': readonly }">
          {{ form.birthDay }}
        </div>
        <div v-else ref="divInput" @click="toggleBirthdayPicker" class="val input-select"
          :class="{ 'placeholder': true, 'inputboxDisabled': readonly }">{{ $t('plsChoose') }}</div>
      </div>

      <div class="form-group">
        <label>{{ $t('gender') }}</label><!--性别-->
        <div ref="radios" class="radio-box">
          <span @click="choseGender('Male')" :class="{ 'active': form.sex === 'Male' }"><i></i>{{ $t('male') }}</span>
          <span @click="choseGender('Female')" :class="{ 'active': form.sex === 'Female' }"><i></i>{{ $t('female')
            }}</span>
        </div>
      </div>
    </div>

    <div v-if="form.identificationType" ref="form2" class="name-wrapper">
      <div class="t">
        <p>Input your name of {{ nameLabel }}.</p>
        <p class="red">For successful loan, please fill in the same name as the ID.</p>
        <!--         <p class="red">Untrue name will affect withdrawals.</p>-->
      </div>
      <div class="form" style="margin: 0;">
        <div class="form-group">
          <label>First Name</label>
          <input class="val" v-model.trim="form.firstName" ref="firstName" @blur="nameBlur('firstName')"
            @focus="scrollIntoView('firstName')" :disabled="readonly" type="text" :placeholder="$t('plsInput')"
            maxlength="50" />
          <p class="error-tips-new">{{ $t('plsInputRight') + " first name" }}</p>
        </div>
        <div class="form-group">
          <label>Middle Name</label>
          <input class="val" v-model.trim="form.middleName" ref="middleName" @focus="scrollIntoView('middleName')"
            @blur="nameBlur('middleName')" :disabled="readonly" type="text" :placeholder="$t('plsInput')"
            maxlength="50" />
          <p class="error-tips-new">{{ $t('plsInputRight') + " middle name" }}</p>
        </div>
        <div class="form-group">
          <label>Last Name</label>
          <input class="val" v-model.trim="form.lastName" ref="lastName" @focus="scrollIntoView('lastName')"
            @blur="nameBlur('lastName')" :disabled="readonly" type="text" :placeholder="$t('plsInput')"
            maxlength="50" />
          <p class="error-tips-new">{{ $t('plsInputRight') + " last name" }}</p>
        </div>
      </div>
    </div>
    <div class="btn-box">
      <!--      <button @click="submitHandler" :disabled="btnCanSubmit || disabledSubmit || readonly" class="submitBtn btn-ui">{{ btnName }}</button>-->
      <button @click="submitHandler" class="submitBtn btn-ui" :disabled="btnCanSubmit || disabledBtn || readonly"
        :class="{ 'isSave': $route.query.btnType === 'save' }">{{ btnName }}</button>
    </div>


    <!--证件类型选择框-->
    <popup v-model="isVisibleIDTypePicker" position="bottom">
      <picker v-if="isVisibleIDTypePickerP" show-toolbar :title="$t('idType')" :columns="iDTypeData"
        value-key="IdentificationType"
        :default-index="iDTypeData.map(item => item.IdentificationType).indexOf(form.identificationType)"
        @cancel="isVisibleIDTypePicker = false; isVisibleIDTypePickerP = false;" @confirm="chooseIDType" />
    </popup>

    <popup v-model="isVisibleBirthdayPicker" position="bottom">
      <picker show-toolbar :title="$t('birthday')" :columns="birthdayData" @cancel="isVisibleBirthdayPicker = false;"
        @confirm="chooseBirthday" />
    </popup>

  </div>
</template>

<script src="./main.js"></script>

<style lang="scss" scoped>
@import "../index";

[data-page=identity-information] {
  .name-wrapper {
    .t {
      padding: 62px 40px 24px;
      font-size: 26px;
      line-height: 36px;
      color: #000;

      .red {
        color: #F64E58;
        font-weight: normal;
      }
    }
  }

}
</style>
